<template>
  <div>
    <div ref="editorContainer" class="quill-editor"></div>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import { CollaborationService } from '../collaboration/collaborationService';
import { wsUrl } from '../common/constants';
import { QuillEditor } from '../common/utils/QuillEditor';

export default {
  name: 'QuillEditor',
  props: {
    docId: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const editorContainer = ref(null);

    onMounted(() => {
      const quillEditor = new QuillEditor(editorContainer.value);
      const collaborationService = new CollaborationService(wsUrl);
      collaborationService.setupCollaboration(props.docId, quillEditor.getInstance());
    });

    return {
      editorContainer
    };
  }
};
</script>

<style scoped>
.quill-editor {
  height: 400px;
}
</style>